import Taro, { Component, Config } from '@tarojs/taro';
import { View,Text,Image } from '@tarojs/components';
import { AtIcon , AtTabs, AtTabsPane } from "taro-ui";

import './Order.scss'

class Order extends Component{
  config: Config = {
    navigationBarBackgroundColor: '#ff4b82',
    navigationBarTextStyle: "white",
    navigationBarTitleText: '全部订单'
  };
  state={
    current:0,
    tabList:[
      {title:'全部'},
      {title:'京东'},
      {title:'拼多多'},
      {title:'唯品会'},
      {title:'苏宁易购'},
    ],
    type:1,
    currentKey:0,
  };

  handleClick=e=>{
    this.setState({current:e})
  };

  fnClick= currentKey =>{
    this.setState({
      currentKey
    })
  };



  render(){
    const {current,tabList,currentKey}=this.state;
    const btnList=['全部订单','付款订单','结算订单','失效订单'];
    return(
      <View>
        <View className="Header">
          <AtTabs
            current={current}
            tabList={tabList}
            onClick={(e)=>this.handleClick(e)}
            scroll
            swipeable={false}
            animated={false}
          />
          <View className='tabsBox'>
            <View className='titleBtn'>
              {
                btnList.map((item,index)=>(
                  <View
                    onClick={this.fnClick.bind(this,index)}
                    style={currentKey===index?'color:#ff4b82':''}
                  >
                    {item}
                  </View>
                ))
              }
            </View>

            <View className='orderList'>
              <View className='orderListTit'>
                <View className='orderNum'>
                  <Text>订单编号：1999999999999</Text>
                  <Text className='copyBtn'>复制</Text>
                </View>
                <Text className='orderState'>已付款</Text>
              </View>

              <View className='orderItem'>
                <Image src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582711806334&di=e72305e699bd9f29af6d815296f2cede&imgtype=0&src=http%3A%2F%2Fpic191.nipic.com%2Ffile%2F20181114%2F27708798_110743608086_2.jpg' />
                <Text className='itemTie'>标题标标标题标题标标标题标题标标标题标题标标标题标题标标题标题标标题标题标标题标题标题标题标题标题</Text>
                <AtIcon value='chevron-right' size='25' color='#333'/>
              </View>

              <View className='realPrice'>
                <Text>实际付款金额</Text>
                <Text>￥443.9</Text>
              </View>

              <View className='orderInfo'>
                <View className='orderTit'>
                  <View>拼多多订单</View>
                  <View>下单时间：2019/09/09 15:00:00</View>
                </View>
                <View >预估收益：<Text className='earning'>￥12.98</Text></View>
              </View>

            </View>

          </View>
        </View>
      </View>
    )
  }
}

export default Order;
